<template>
  <div class="app-container">
    <el-col :span="13">
      <el-input placeholder="输入表名进行过滤" v-model="filterText" style="width: 210px;margin-bottom: 5px"/>
      <span>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 1.5%">搜索</el-button>
        <el-button type="success" :disabled="isChecked" @click="desensitizationExport">脱敏导出</el-button>
        <el-button type="info" @click="">自定义导出</el-button>
      </span>
      <div class="down-tree">
        <el-tree :props="props" :load="loadNode" lazy ref="tree" @node-click="handle"
                 :filter-node-method="filterNode" @check="check" show-checkbox style="height: 300px">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            {{ node.label }}
          </span>
      </span>
        </el-tree>
      </div>
    </el-col>
    <el-col :span="11" style="background-color: #f1f3f4;">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="80px" style="padding-top: 20px">
        <el-form-item label="数据表名" prop="tableName">
          <el-input clearable size="small" :disabled="true" style="width: 300px" placeholder="请输入表名"
                    v-model="form.tableName"/>
        </el-form-item>
        <el-form-item label="导出路径" prop="exportFileLocation">
          <el-input clearable size="small" style="width: 300px" placeholder="请输入导出路径"
                    v-model="form.exportFileLocation"/>
        </el-form-item>
        <el-form-item label="导出字段" prop="exportField">
          <el-input clearable size="small" style="width: 300px" placeholder="请输入导出字段"
                    v-model="form.exportField"/>
        </el-form-item>
        <el-form-item label="过滤条件" prop="filterCondition">
          <el-input clearable type="textarea" style="width: 300px" :rows="3" size="small" placeholder="请输入过滤条件"
                    v-model="form.filterCondition"/>
        </el-form-item>
        <div class="dialog-footer" style="width:100%;text-align: center;padding-bottom: 20px">
          <el-button type="primary" @click="update">保 存</el-button>
        </div>
      </el-form>
    </el-col>
  </div>
</template>

<script>

import dataExportConfApi from "@/api/dashboard/dataExportConf";
import dataExportTaskApi from "@/api/dashboard/dataExportTask"

export default {
  name: 'DataExportConf',
  data() {
    return {
      filterText: null,
      props: {
        label: 'dbName',
        children: 'tableName',
        isLeaf: 'leaf'
      },
      form: {
        id:null,
        tableName: null,
        exportFileLocation: null,
        exportField: null,
        filterCondition: null
      },
      rules: {},
      isChecked: true,
    }
  },
  created() {

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handle(node) {
      if(node.leaf === true){
        this.form.tableName = node.dbName
        let params = {dbName: node.tableName,tableName: this.form.tableName }
        dataExportConfApi.queryConf(params).then(res =>{
          this.form.tableName = node.dbName
          this.form.exportFileLocation = res.exportFileLocation
          this.form.exportField = res.exportField
          this.form.filterCondition = res.filterCondition
          this.form.id = res.id
        })
      }
    },
    update(node){
      let data = {id:this.form.id,dbName: node.tableName,tableName: this.form.tableName,
        exportFileLocation:this.form.exportFileLocation,exportField: this.form.exportField,
        filterCondition: this.form.filterCondition}
      dataExportConfApi.update(data).then(res => {
        if(res){
          this.$notify({
            title: '成功',
            message: '集群数据导出配置保存成功',
            type: 'success'
          });
        }else{
          this.$notify.error({
            title: '失败',
            message: '集群数据导出配置保存失败',
          });
        }
      })
    },
    desensitizationExport(){
      for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
        if(this.$refs.tree.getCheckedNodes()[i].tableName === undefined) continue;
        let params = {isDesensitize: true}
        let data = {
              dbName: this.$refs.tree.getCheckedNodes()[i].tableName,
              tableName: this.$refs.tree.getCheckedNodes()[i].dbName}
        dataExportTaskApi.dataExport(data,params)
      }
      this.$notify({
        title: '成功',
        message: '添加集群数据导出任务成功',
        type: 'success'
      });
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        dataExportConfApi.getDbList().then(res => {
          let dbNames = []
          res.forEach(daName => {
            dbNames.push({dbName: daName})
          })
          return resolve(dbNames);
        })
      }else if (node.level === 1) {
        let param = {dbName: node.data.dbName}
        dataExportConfApi.getTableList(param).then(res => {
          let tableList = []
          res.forEach(tableName => {
            tableList.push({dbName: tableName,tableName: param.dbName,leaf: true})
          })
          return resolve(tableList);
        })
      }
    },
    check(){
      if(this.$refs.tree.getCheckedNodes().length<=0){
        this.isChecked = true
      }else {
        this.isChecked = false
      }
    }
  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 28px;
}
.down-tree{
  height: 300px;
  display: block;
  overflow-y: scroll;
}
</style>
